<template>
  <div>
    <div ref="bg" class="bg">
      <div class="aui">
        <div class="auis-flex">
          <div class="aui-flex-box">
            <h1>{{userName}}</h1>
            <h2>{{userPhone}}</h2>
          </div>
          <div class="aui-my-user">
            <van-uploader :after-read="afterRead">
              <img :src="isImg" alt width="70" height="70" />
              <!-- @/img/my-img/user-logo-004.png -->
            </van-uploader>
          </div>
        </div>

        <div class="auis-flex">
          <div class="but" @click="goPer" style="margin-right:7px;">
            <h3>
              <i class="us"></i>
              个人资料
            </h3>
          </div>
          <div class="but" @click="goSetting" style="margin-left:7px;">
            <h3>
              <i class="sz"></i>
              设置
            </h3>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <van-cell is-link style="padding-right: 0;">
        <template slot="title">
          <i class="ic-edit"></i>
          <span class="custom-title">意见反馈</span>
        </template>
      </van-cell>
      <van-cell is-link style="padding-right: 0;">
        <template slot="title">
          <i class="ic-help"></i>
          <span class="custom-title">帮助中心</span>
        </template>
      </van-cell>

      <van-cell is-link value="10086" style="padding-right: 0;" @click="change">
        <template slot="title">
          <i class="ic-kf"></i>
          <span class="custom-title">联系我们</span>
        </template>
      </van-cell>

      <van-dialog v-model="show" title="联系我们" style="text-align:center;">
        <img src="http://huruqing.cn/qingliu/img/ewm2.png" width="120" height="120"/>
      </van-dialog>
    </div>
    <Footer page="my"></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import { info } from "@/API/user.js";
export default {
  data() {
    return {
      show: false,
      isImg:
        "https://www.17sucai.com/preview/1527619/2019-02-21/my/images/user-logo-004.png",
      userName: "",
      userPhone: ""
    };
  },
  components: {
    Footer
  },
  methods: {
    change() {
      this.show = true;
    },
    afterRead(file) {
      this.$store.commit("updateImgUrl", file.content);
      this.isImg = this.$store.state.imgUrl;
      this.$refs.bg.style.background = `url("${this.isImg}") no-repeat center/cover`;
    },
    goSetting() {
      this.$router.push("/setting");
    },
    goPer() {
      this.$router.push("/amendPersonal");
    }
  },
  mounted() {
    this.userName = this.$store.state.userInfo.username;
    this.userPhone = this.$store.state.userInfo.phone;
    this.isImg = this.$store.state.imgUrl;
    this.$refs.bg.style.background = `url("${this.isImg}") no-repeat center/cover`;
  }
};
</script>
<style lang="less" scoped>
.bg {
  width: 100%;
  height: 272px;
  padding: 1px;
  box-sizing: border-box;
  z-index: 1;
  position: relative;
  background: url("../../img/my-img/user-logo-004.png") no-repeat center/cover;
  .aui {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(220, 219, 198, 0.8);
    padding-top: 80px;
    box-sizing: border-box;
    .auis-flex {
      display: flex;
      align-items: center;
      padding: 15px;
      position: relative;
      box-sizing: border-box;
      .aui-flex-box {
        flex: 1;
        min-width: 0;
        font-size: 14px;
        color: #333;
        h1 {
          font-size: 32px;
          line-height: 42px;
        }
        h2 {
          font-size: 15px;
          line-height: 18px;
          font-weight: normal;
        }
      }
      .aui-my-user {
        width: 70px;
        height: 70px;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
      .but {
        background: #fff;
        border-radius: 3px;
        padding: 13px 24px;
        box-sizing: border-box;
        flex: 1;
        text-align: center;

        h3 {
          font-size: 14px;
          color: #0a0a0a;
          line-height: 1.5;
          display: flex;
          align-items: center;
          i {
            width: 25px;
            height: 25px;
            display: block;
            margin-right: 8px;
          }
          .us {
            background: url("../../img/my-img/userInfo.jpg") no-repeat
              center/cover;
          }
          .sz {
            background: url("../../img/my-img/sz.png") no-repeat center/cover;
          }
        }
      }
    }
  }
}
.list {
  width: 100%;
  // height: 275px;
  background-color: #fff;
  i {
    width: 25px;
    height: 25px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: top;
  }
  .ic-edit {
    background: url("../../img/my-img/icon-edit.png") no-repeat center/cover;
  }
  .ic-help {
    background: url("../../img/my-img/icon-help.png") no-repeat center/cover;
  }
  .ic-kf {
    background: url("../../img/my-img/icon-kf.png") no-repeat center/cover;
  }
}
</style>